<template>
  <Dialog
    v-model="showEditJobSheetDialog"
    width="640"
    title="Inspection Service"
  >
    <template #headerAppend="{ close }">
      <v-icon color="#fff" class="mr-3">mdi-content-save</v-icon>
      <v-icon color="#fff" @click="close">mdi-close</v-icon>
    </template>
    <template>
      <v-card flat height="560" class="pl-7 pr-7 pt-7 edit-job-sheet-dialog">
        <v-row no-gutters class="mb-4">
          <v-col cols="3" class="label-input">Title</v-col>
          <v-col cols="6">
            <v-text-field
              solo
              hide-details
              dense
              class="gray-input-40"
            ></v-text-field>
          </v-col>
        </v-row>
        <v-row no-gutters class="mb-4">
          <v-col cols="3" class="label-input">Contact Number</v-col>
          <v-col cols="6">
            <v-text-field
              solo
              hide-details
              dense
              class="gray-input-40"
            ></v-text-field>
          </v-col>
        </v-row>
        <v-row no-gutters class="mb-4">
          <v-col cols="3" class="label-input"> </v-col>
          <v-col>
            <v-radio-group
              row
              dense
              hide-details
              class="mt-0 pt-0 radio-container"
            >
              <v-radio label="HK$-" value="HK"></v-radio>
              <v-radio label="Paid" value="paid"></v-radio>
              <v-radio label="Not Paid" value="notPaid"></v-radio>
              <v-radio label="closed" value="closed"></v-radio>
              <v-radio label="exemption" value="exemption"></v-radio>
            </v-radio-group>
          </v-col>
        </v-row>
        <v-row no-gutters class="mb-4">
          <v-col cols="3" class="label-input">Customer Name</v-col>
          <v-col cols="6">
            <v-text-field
              solo
              hide-details
              dense
              class="gray-input-40"
            ></v-text-field>
          </v-col>
        </v-row>
        <v-row no-gutters class="mb-4">
          <v-col cols="3" class="label-input">Inspection number</v-col>
          <v-col cols="6">
            <v-text-field
              solo
              hide-details
              dense
              class="gray-input-40"
            ></v-text-field>
          </v-col>
        </v-row>
        <v-row no-gutters class="mb-4">
          <v-col cols="3" class="label-input">Product Name</v-col>
          <v-col cols="6">
            <v-text-field
              solo
              hide-details
              dense
              class="gray-input-40"
            ></v-text-field>
          </v-col>
        </v-row>
        <v-row no-gutters class="mb-4 align-start">
          <v-col cols="3" class="label-input">Text can be entered</v-col>
          <v-col cols="">
            <v-textarea
              solo
              hide-details
              no-resize
              dense
              class="gray-input-40"
              height="120"
            ></v-textarea>
          </v-col>
        </v-row>
      </v-card>
    </template>
  </Dialog>
</template>

<script lang="ts">
import { Vue, Component, PropSync } from "vue-property-decorator";
import Dialog from "@/components/Maintenance/Dialog/Dialog.vue";
@Component({
  components: {
    Dialog,
  },
})
export default class EditJobSheet extends Vue {
  @PropSync("show", {
    type: Boolean,
    default: false,
  })
  showEditJobSheetDialog!: boolean;
}
</script>

<style lang="scss" scoped>
@import "./EditJobSheet.scss";
</style>
